<template>
	<view class="template-about tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<!-- <view style="background: linear-gradient(to  top right, #007CEC, #00BEE8);"> -->
			<view style="background-image: url('https://cs4.hephp.cn/images/h5/mine/Group_17@3x.png');background-size: cover;background-position: center;background-repeat: no-repeat;">
			<view  style="text-align: right;padding-top: 50px;padding-right: 10px;color: #fff;font-size: 26px;">
				<text @click="sm" class="tn-icon-scan"></text>
			</view>
			<view style="text-align: center;color: #fff;font-size: 18px;padding-top: 10px;">
				<text>我的</text>
			</view>
			<view style="padding-top: 20px;">
				<view style="overflow: hidden;display: block;padding-top: 20px;width: 80%;margin: 0 auto;">
					<view v-if="uinfo.nickname" style="width: 20%;float: left;padding: 5px;" @click="goLogin">
						<view class="cts" :style="{'background-image': 'url('+uinfo.avatarUrl+')'}"></view>
					</view>
					<view v-if="!uinfo.nickname" style="width: 20%;float: left;padding: 5px;" @click="goLogin">
						<view class="cts" :style="{'background-image': 'url(https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132)'}"></view>
					</view>
					<view style="width: 80%;float: left;padding: 5px;padding-left: 20px;padding-top: 5px;">
						<view style="height: 30px;line-height: 30px;">
							<text @click="goLogin"
								style="font-size: 16px;font-weight: 600;color: #fff;">{{uinfo.nickname==null?'立即登录 >':uinfo.nickname}}</text>
							<text v-if="uinfo.nickname" style="background-color: #FBE354;color: #0F5E8E;font-size: 11px;border-radius: 20px;margin-left: 5px;font-weight: 600;padding: 2px 8px 2px 8px;">VIP1</text>
						</view>
						<view v-if="!uinfo.nickname"
							style="height: 30px;line-height: 30px;font-size: 13px;font-weight: 600;color: #fff;">
							点击登录
						</view>
						<view v-if="uinfo.nickname"
							style="height: 30px;line-height: 30px;font-size: 13px;font-weight: 600;color: #fff;">
							ID：{{uinfo.phone}}
						</view>
					</view>
				</view>
			</view>
			<view
				style="overflow: hidden;color: #fff;text-align: center;width: 100%;margin-top: 15px;padding-bottom: 20px;">
				<view @click="gto('/pages/mine/usc')" style="width:25%;float: left;">
					<view style="font-size: 22px;">28</view>
					<view style="margin-top: 3px;font-size: 12px;">我的收藏</view>
				</view>
				<view style="width:25%;float: left;">
					<view style="font-size: 22px;">28</view>
					<view style="margin-top: 3px;font-size: 12px;">关注</view>
				</view>
				<view style="width:25%;float: left;">
					<view style="font-size: 22px;">28</view>
					<view style="margin-top: 3px;font-size: 12px;">浏览记录</view>
				</view>
				<view @click="gto('/pages/qd/qd')" style="width:25%;float: left;">
					<view  v-if="uinfo.nickname" style="font-size: 22px;">{{uinfo.jnum}}</view>
					<view  v-if="!uinfo" style="font-size: 22px;">0</view>
					<view style="margin-top: 3px;font-size: 12px;">积分</view>
				</view>
			</view>
		</view>
		<view>


			<view style="width: 96%;margin: 0 auto;padding: 10px;margin-top: 10px;" class="about-shadow tn-margin-top tn-padding-top-sm tn-padding-bottom-sm" >
				<view class="justify-content-item tn-text-bold tn-text-lg">我的服务</view>
				<tn-scroll-list :indicator="false" :indicatorWidth="100" :indicatorBarWidth="30" indicatorColor="#FFE2D9"
					indicatorActiveColor="#FF7043">
					<view class="tn-flex tn-margin-left-sm tn-margin-right-sm tn-margin-top">
						<block v-for="(item, index) in fwData" :key="index">
							<view @click="gto(item.url)" class="tn-flex-1 tn-padding-sm tn-radius">
								<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
									<view class="tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
										<!-- :style="'background-image: url('+item.image+');'" -->
										<!-- :class="[`tn-icon-${item.icon}`]" -->
										<image style="height: 48px;width: 48px;" :src="item.image"></image>
										<!-- <view ></view> -->
									</view>
									<view class="tn-color-black tn-text-df tn-text-center tn-margin-top-sm">
										<text class="tn-text-ellipsis">{{ item.title }}</text>
									</view>
								</view>
							</view>
						</block>
					</view>
				</tn-scroll-list>
			</view>
			<view style="width: 96%;margin: 0 auto;padding: 10px;margin-top: 10px;" class="about-shadow tn-margin-top tn-padding-top-sm tn-padding-bottom-sm">
				<view class="tn-flex tn-flex-row-between tn-padding-top-xl">
					<view class="justify-content-item tn-text-bold tn-text-lg">
						<text class="">我的商城</text>
					</view>
					<view class="justify-content-item tn-text-df">
						<text @click="gto('/pages/orderlist/orderlist?tabsIndex=0')"  class="tn-padding-xs">全部订单</text>
						<text class="tn-icon-right"></text>
					</view>
				</view>
				<tn-scroll-list :indicator="false" :indicatorWidth="100" :indicatorBarWidth="30" indicatorColor="#FFE2D9"
					indicatorActiveColor="#FF7043">
					<view class="tn-flex tn-margin-left-sm tn-margin-right-sm tn-margin-top">
						<block v-for="(item, index) in orderlist" :key="index">
							<view @click="gto(item.url)" class="tn-flex-1 tn-padding-sm tn-radius">
								<view @click="gto('/pages/orderlist/orderlist?tabsIndex='+item.id)" class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
									<view class="tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
										<image style="height: 48px;width: 48px;" :src="item.image"></image>
										<!-- <view :class="[`tn-icon-${item.icon}`]"></view> -->
									</view>
									<view class="tn-color-black tn-text-df tn-text-center">
										<text class="tn-text-ellipsis">{{ item.title }}</text>
									</view>
								</view>
							</view>
						</block>
					</view>
				</tn-scroll-list>
			</view>

			<!-- 更多信息-->
			<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<view @click="gto('/pages/mine/kefu')" class="tn-flex tn-flex-col-center">
						<view
							class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-16 tn-color-white">
							<view class="tn-icon-wechat-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">联系客服</view>
					</view>
				</tn-list-cell>

				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<view  @click="gto('/pages/mine/wm')" class="tn-flex tn-flex-col-center">
						<view
							class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-12 tn-color-white">
							<view class="tn-icon-safe-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">关于我们</view>
					</view>
				</tn-list-cell>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<view class="tn-flex tn-flex-col-center" @click="logout">
						<view
							class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-14 tn-color-white">
							<view class="tn-icon-safe-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">退出登录</view>
						<!-- <view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view> -->
					</view>
				</tn-list-cell>
			</view>

		</view>
		<tabbar :curls="4"></tabbar>
		<!-- 底部tabbar start-->
		<!--  <view class="tabbar footerfixed">
      <view class="action">
        <view class="bar-icon">
      
          <image class="" src='https://resource.tuniaokj.com/images/tabbar/home_tn.png'></image>
        </view>
        <view class="tn-color-gray">首页</view>
      </view>
      <view class="action">
        <view class="bar-icon">
          <image class="" src='https://resource.tuniaokj.com/images/tabbar/information_tn.png'></image>
        </view>
        <view class="tn-color-gray">圈子</view>
      </view>
      <view class="action">
        <view class="bar-icon">
          <image class="" src='https://resource.tuniaokj.com/images/tabbar/case_tn.png'></image>
        </view>
        <view class="tn-color-gray">福利</view>
      </view>
      <view class="action">
        <view class="bar-icon">
          <image class="" src='https://resource.tuniaokj.com/images/tabbar/my_tnnew.png'></image>
        </view>
        <view class="tn-color-black">我的</view>
      </view>
    </view>
	<view class="tn-padding-xl"></view>
     -->

		<!-- 回到首页悬浮按钮-->
		<!-- <nav-index-button></nav-index-button> -->

	</view>
</template>

<script>
	import QRCode from 'qrcode';
	import {
		getToken,
		setToken,
		removeToken,
		getLogins
	} from '@/utils/auth';
	export default {
		name: 'about-demo-3',
		data() {
			return {
				uinfo: '',
				src: '',
				uid: '',
				show: false,
				historyData: [{
						title: '分销中心',
						icon: 'organizatio',
						color: 'orange',
						url: '/pages/mine/sc',
						image:""
					},
					{
						title: '积分商城',
						icon: 'level',
						color: 'purple',
						url: '/pages/mine/jfsc',
						image:""
					},
					{
						title: '商城',
						icon: 'clock',
						color: 'blue',
						url: '/pages/mine/sc',
						image:""
					},
					{
						title: '会员',
						icon: 'team',
						color: 'purplered',
						url: '/pages/mine/uhy',
						image:""
					}
				],
				orderlist: [{
						id:1,
						title: '待支付',
						icon: 'pay',
						color: '',
						url: '',
						image:'https://cs4.hephp.cn/images/h5/mine/Frame@3x.png'
					},
					{
						id:2,
						title: '待发货',
						icon: 'folder-upload',
						color: '',
						url: '',
						image:'https://cs4.hephp.cn/images/h5/mine/Frame_1@3x.png'
					},
					{
						id:3,
						title: '待收货',
						icon: 'folder-upload',
						color: '',
						url: '',
						image:'https://cs4.hephp.cn/images/h5/mine/Frame_2@3x.png'
					},

					{
						id:4,
						title: '待评价',
						icon: 'message',
						color: '',
						url: '',
						image:'https://cs4.hephp.cn/images/h5/mine/Frame_3@3x.png'
					},
					{
						id:5,
						title: '退款/售后',
						icon: 'refund',
						color: '',
						url: '',
						image:'https://cs4.hephp.cn/images/h5/mine/Frame_4@3x.png'
					}
				],
				fwData: [{
						title: '我的钱包',
						icon: 'refund',
						color: 'teal',
						url: '/pages/qd/myqb',
						image:"https://cs4.hephp.cn/images/h5/mine/我的钱包@2x.png"
					},
					{
						title: '我的推荐',
						icon: 'my-add',
						color: 'orange',
						url: '/pages/mine/tjm',
						image:"https://cs4.hephp.cn/images/h5/mine/我的推荐@3x.png"
					},
					{
						title: '分销信息',
						icon: 'share-square',
						color: 'indigo',
						url: '/pages/fx/fx',
						image:"https://cs4.hephp.cn/images/h5/mine/分销信息@3x.png"
					},
					{
						title: '入驻',
						icon: 'add-square',
						color: 'green',
						url: '/pages/tuniao/addshop',
						image:"https://cs4.hephp.cn/images/h5/mine/入驻@3x.png"
					},
				],
				winfo:''
			}
		},
		onShow() {
			this.uid = uni.getStorageSync('uid');
			this.uinfo = uni.getStorageSync('uinfo');
		},
		methods: {
			sm(){
				 uni.scanCode({
					onlyFromCamera: true, //只能相机拍摄
					scanType: ['qrCode'], //条形码+二维码
					success(res) {
						if (res.result) {
							// 扫描成功，处理二维码内容
							console.log('扫描结果：', res.result);
							// 这里可以进行后续操作，如跳转页面、显示信息等
						} else {
							// 扫描失败
						   this.tool.toastTip('扫描失败,请稍后重试!', 'none', 1000)
						}
					},
					fail() {
						// 调用相机失败
						this.tool.toastTip('调用相机失败,请稍后重试!', 'none', 1000)
					}
				});
			},
			gtotg() {
				let urls = 'http://cs4.hephp.cn/index/Users/imagechack?uid=' + this.uid
				QRCode.toDataURL(urls)
					.then(url => {
						this.src = url;
					})
					.catch(err => {
						console.error(err)
					})
				this.show = true
			},
			//修改用户信息
			upuser() {
				uni.navigateTo({
					url: "/pagesMine/userinfo/userinfo"
				})
			},
			gto(e) {
				uni.navigateTo({
					url: e
				})
			},
			logout() {
				uni.removeStorageSync('uid');
				uni.removeStorageSync('uinfo');
				removeToken()
				uni.navigateTo({
					url: '/pages/loginB/loginB'
				})
			},
			// 简约登录
			goLogin() {
				let uid = this.uid
				console.log(uid)
				if (!uid) {
					/*#ifdef MP*/
					uni.navigateTo({
						url: '/pages/loginA/loginA'
					})
					/*#endif*/
					/*#ifdef APP-PLUS*/
					uni.navigateTo({
						url: '/pages/loginA/login'
					})
					/*#endif*/
					/*#ifdef H5*/
					uni.navigateTo({
						url: '/pages/loginB/loginB'
					})
					/*#endif*/
				}

			},
			// 跳转到
			navTuniaoHome(e) {
				wx.vibrateLong();
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/templatePage/custom_nav_bar.scss';



	/* 顶部背景图 start */
	.top-backgroup {
		height: 450rpx;
		z-index: -1;
		background-color: #2F95FA;

		.backgroud-image {
			width: 100%;
			height: 450rpx;
			// z-index: -1;
		}
	}

	/* 顶部背景图 end */

	/* 用户头像 start */
	.logo-image {
		width: 120rpx;
		height: 120rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 50%;
		overflow: hidden;
		background-color: #FFFFFF;
	}

	/* 页面 start*/
	.about-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.about {

		&__wrap {
			position: relative;
			z-index: 1;
			margin: 20rpx 30rpx;
			margin-top: -230rpx;
		}
	}

	/* 页面 end*/

	/* 图标容器1 start */
	.icon1 {
		&__item {
			// width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 40rpx;
				height: 40rpx;
				font-size: 28rpx;
				border-radius: 50%;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
				}
			}
		}
	}

	/* 图标容器1 end */

	/* 底部tabbar start*/
	.footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
		background-color: #FFFFFF;
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.tabbar {
		display: flex;
		align-items: center;
		min-height: 110rpx;
		justify-content: space-between;
		padding: 0;
		height: calc(110rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	}

	.tabbar .action {
		font-size: 22rpx;
		position: relative;
		flex: 1;
		text-align: center;
		padding: 0;
		display: block;
		height: auto;
		line-height: 1;
		margin: 0;
		overflow: initial;
	}

	.tabbar .action .bar-icon {
		width: 100rpx;
		position: relative;
		display: block;
		height: auto;
		margin: 0 auto 10rpx;
		text-align: center;
		font-size: 42rpx;
	}

	.tabbar .action .bar-icon image {
		width: 50rpx;
		height: 50rpx;
		display: inline-block;
	}

	/* 图标容器12 start */
	.icon12 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 60rpx;
				// border-radius: 50%;
				margin-bottom: 0rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					// background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);


				}
			}
		}
	}

	/* 图标容器11 start */
	.icon11 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 70rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
				}
			}
		}
	}

	/* 大嘴鸟*/
	.dong {
		z-index: 9999;
		position: fixed;
		top: -40px;
		right: -80px;
		transform: scale(0.24);
		-webkit-transform: scale(0.24);
		-moz-transform: scale(0.24);

	}

	.monster {
		transform: rotate(-50deg);
		-ms-transform: rotate(-50deg);
		/* IE 9 */
		-moz-transform: rotate(-50deg);
		/* Firefox */
		-webkit-transform: rotate(-50deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(-50deg);
		/* Opera */
		display: flex;
		justify-content: center;
		position: relative;
		width: 170px;
		height: 400px;
		border-top-left-radius: 200px;
		border-top-right-radius: 200px;
		background-color: #3C47D7;
		box-shadow: 20px 20px 60px #4650E5;
	}

	.monster__face {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: absolute;
		top: 14%;
		width: 75%;
		height: 160px;
	}

	.monster__noses {
		top: 50%;
		display: flex;
		justify-content: space-between;
		width: 28%;
		height: auto;
		margin-bottom: 10px;
	}

	.monster__nose {
		width: 8px;
		height: 12px;
		border-radius: 20px;
		background: rgba(0, 0, 0, 0.5);
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
	}

	.monster__mouth {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
		height: 0%;
		overflow: hidden;
		border: 25px solid #FFC333;
		border-radius: 100px;
		background-color: #810332;
		animation: mouth 1.75s infinite;
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
		box-sizing: border-box;
	}

	.monster__mouth::before {
		content: '';
		position: absolute;
		width: 150px;
		height: 80px;
		border-radius: 100px;
		background-color: #400018;
	}

	.monster__mouth::after {
		content: '';
		position: absolute;
		bottom: -80px;
		width: 160px;
		height: 80px;
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		background-color: #DC1B50;
		animation: tongue 1.75s infinite;
	}

	.monster__top {
		position: absolute;
		top: -30px;
		width: 170px;
		height: 30px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		background-color: #ffffff;
		z-index: 100;
		animation: t 1.75s infinite;
	}

	.monster__bottom {
		position: absolute;
		bottom: 0;
		width: 100px;
		height: 30px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background-color: #ffffff;
		z-index: 100;
		animation: b 1.75s infinite;
	}


	.avatar-eye {
		position: absolute;
		top: -10%;
		width: 65px;
		height: 65px;
		background: linear-gradient(105deg, white, #cb87f4);
		border-radius: 100%;
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
		margin: 3px;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}


	.avatar-eye--green {
		background: linear-gradient(to bottom, #fdfdfd, #c3efea);
	}

	.avatar-eye--violet {
		background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
	}

	.cts {
		width: 120rpx;
		height: 120rpx;
		background-size: cover;
		border-radius: 100%;
	}

	.eye--left {
		left: 10%;
	}

	.eye--right {
		left: 85%;
	}

	.eye--center {
		left: 45%;
		top: 10%;
	}

	.avatar-eye-pupil {
		position: absolute;
		width: 55%;
		height: 55%;
		left: 50%;
		top: 25%;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		z-index: 100;
		border-radius: 100%;
	}


	.pupil--green {
		background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
	}

	.pupil--pink {
		background: linear-gradient(135deg, #f1a183, #8535cd);
	}


	.avatar-eye-pupil-blackThing {
		position: absolute;
		width: 55%;
		height: 55%;
		left: 50%;
		top: 25%;
		background: #2c2f32;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		border-radius: 100%;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	}

	.avatar-eye-pupil-lightReflection {
		position: absolute;
		width: 7px;
		height: 7px;
		left: 25%;
		top: 10%;
		background: #ebebeb;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		border-radius: 100%;
		box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
	}





	/**/
	@keyframes t {

		0%,
		10%,
		80%,
		100% {
			top: -30px;
		}

		20% {
			top: 0px;
		}

		30% {
			top: -20px;
		}

		40% {
			top: -0px;
		}

		50% {
			top: -25px;
		}

		70% {
			top: 0px;
		}
	}

	@keyframes b {

		0%,
		10%,
		80%,
		100% {
			bottom: -30px;
		}

		20% {
			bottom: 0px;
		}

		30% {
			bottom: -20px;
		}

		40% {
			bottom: -0px;
		}

		50% {
			bottom: -25px;
		}

		70% {
			bottom: 0px;
		}
	}

	@keyframes mouth {

		0%,
		10%,
		100% {
			width: 100%;
			height: 0%;
		}

		15% {
			width: 90%;
			height: 30%;
		}

		20% {
			width: 50%;
			height: 70%;
		}

		25% {
			width: 70%;
			height: 70%;
		}

		30% {
			width: 80%;
			height: 60%;
		}

		35% {
			width: 60%;
			height: 70%;
		}

		40% {
			width: 55%;
			height: 75%;
		}

		45% {
			width: 50%;
			height: 90%;
		}

		50% {
			width: 40%;
			height: 70%;
		}

		55% {
			width: 70%;
			height: 95%;
		}

		60% {
			width: 40%;
			height: 50%;
		}

		65% {
			width: 100%;
			height: 60%;
		}

		70% {
			width: 100%;
			height: 70%;
		}

		75% {
			width: 90%;
			height: 70%;
		}

		80% {
			width: 50%;
			height: 70%;
		}

		85% {
			width: 90%;
			height: 50%;
		}

		85% {
			width: 40%;
			height: 70%;
		}

		90% {
			width: 90%;
			height: 30%;
		}

		95% {
			width: 100%;
			height: 10%;
		}
	}

	@keyframes tongue {

		0%,
		20%,
		100% {
			bottom: -80px;
		}

		30%,
		90% {
			bottom: -40px;
		}

		40% {
			bottom: -45px;
		}

		50% {
			bottom: -50px;
		}

		70% {
			bottom: -80px;
		}

		90% {
			bottom: -40px;
		}
	}
</style>